<template>
  <div class="user-add">
    <el-row>
      <el-col :span="12">
        <!--        表单-->
        <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">

          <!--          限时秒杀名称-->
          <el-form-item label="秒杀名称" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <!--          开始时间-->
          <!--              :default-value="Number(form.begintime)"-->
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="begintime"
              type="datetime"
              placeholder="选择开始时间">
            </el-date-picker>
          </el-form-item>
          <!--          结束时间-->
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="endtime"
              type="datetime"
              placeholder="选择结束时间">
            </el-date-picker>
          </el-form-item>
          <!--          一级分类-->
          <el-form-item label="一级分类" prop="first_cateid">
            <el-select v-model="form.first_cateid" placeholder="请选择" @change="handleChangeCategory">
              <el-option
                v-for="item of categoryList" :key="item.id"
                v-if="item.catename != form.catename"
                :value="item.id" :label="item.catename"></el-option>
            </el-select>
          </el-form-item>
          <!--          二级分类-->
          <el-form-item label="二级分类" prop="second_cateid">
            <el-select v-model="form.second_cateid" placeholder="请选择" @change="handleChangeCategory2">
              <el-option
                v-for="item of secondCategory" :key="item.id"
                :value="item.id" :label="item.catename"></el-option>
            </el-select>
          </el-form-item>
          <!--          商品编号-->
          <el-form-item label="商品编号" prop="goodsid" >
            <el-select v-model="form.goodsid" placeholder="请选择"  @change="handleChangeGoods">
              <el-option
                v-for="item of threeGoods" :key="item.id"
                :value="item.id" :label="item.goodsname"></el-option>
            </el-select>
          </el-form-item>
          <!--          状态-->
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="2"
              active-color="#f00"
              inactive-color="#eee"
            ></el-switch>
          </el-form-item>
          <el-form-item v-if="typeof $route.params.id == 'undefined'">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    name: "vUserAdd",
    mounted() {
      //请求商品详情 判断是否有id参数
      if (this.$route.params.id) {//有
        this.axios({
          url: '/api/seckinfo',
          params: {id: this.$route.params.id},
          method: 'get'
        }).then(res => {//请求成功后
          console.log(res.list, '限时活动详情------')
          this.form = res.list
          //初始化二级分类
          let currentCategory = this.categoryList.filter(item => {
            return item.id == this.form.first_cateid
          })
          //初始化时间
          this.begintime = new Date(Number(this.form.begintime))
          this.endtime = new Date(Number(this.form.endtime))
          //初始化三级商品
          this.getThreeGoods()
          this.secondCategory = currentCategory[0].children//取出规格中对应的属性
          this.form.id = this.$route.params.id//手动添加id
        })
      }
      this.updatecategory()//请求一级分类
    },
    data() {
      return {
        form: {status: 1},
        rules: {
          title: [
            {required: true, message: '请填写秒杀名称', trigger: 'blur'}
          ],
          // begintime: [
          //   {required: true, message: '请填写活动开始时间', trigger: 'blur'}
          // ],
          // endtime: [
          //   {required: true, message: '请填写活动结束时间', trigger: 'blur'}
          // ],
          first_cateid: [
            {required: true, message: '请选择一级分类', trigger: 'blur'}
          ],
          second_cateid: [
            {required: true, message: '请选择二级分类', trigger: 'blur'}
          ],
          goodsid: [
            {required: true, message: '请选择商品', trigger: 'blur'}
          ],
        },
        secondCategory: [],//二级分类,
        threeGoods:[],//三级商品
        threeGoodsSelected: [],//商品选中集合 id
        begintime: '',
        endtime: ''
      }
    },
    computed: {
      ...mapState(['categoryList'])
    },
    methods: {
      ...mapActions(['updatecategory']),
      //选中分类一时
      handleChangeCategory(id) {
        delete this.form.second_cateid //清除二级分类中的内容
        delete this.form.goodsid //清除三级商品中的内容
        this.threeGoods = []
        let currentCategory = this.categoryList.filter(item => {
          return item.id == id
        })
        this.secondCategory = currentCategory[0].children
      },
      //选中二级分类时
      handleChangeCategory2(id) {
        delete this.form.goodsid //清除三级商品中的内容
        this.threeGoods = []
        // console.log(this.form.second_cateid,'二级分类id集合');
        this.getThreeGoods()
      },
      //获取三级商品
      getThreeGoods() {
        this.axios({
          url:'/api/goodslist',
          params: {
            fid: this.form.first_cateid,
            sid: this.form.second_cateid
          }
        }).then(res =>{
          // console.log(res, '二级商品');
          if(res.list) {
            this.threeGoods = res.list
          }
        })
      },
      //处理三级商品
      handleChangeGoods(id) {
        console.log(id);
        this.form.goodsid = id
        // console.log(this.form.goodsid)
        // if (id.length == 0) return this.form.goodsid = ''
        // if(id.length == 1){
        //   this.form.goodsid = id[0] + ''
        // }else{
        //   this.form.goodsid = id.join(',')
        // }
        // console.log(this.form.goodsid)
      },
      //提交表单功能
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('确定添加/修改秒杀活动?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              //处理时间数据
              this.form.begintime = new Date(this.begintime).getTime()
              this.form.endtime = new Date(this.endtime).getTime()
              if(this.form.begintime > this.form.endtime) {
                this.$message({
                  type: 'info',
                  message: '活动时间开始结束设置错误'
                });
                return
              }
              let url = this.$route.params.id ? '/api/seckedit' : '/api/seckadd'
              //发送数据
              this.axios({
                method: 'post',
                url: url,
                data: this.form
              }).then(res => {
                if (res.code == 200) {//发送成功后
                  this.$store.dispatch('updateseck')//更新goodsList
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                  this.$router.go(-1)
                } else {
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                }
              })
            })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消操作'
                });
              });
          } else {
            this.$message({
              type: 'info',
              message: '信息填写错误'
            });
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  #div1 {
    min-width: 600px;
  }

  .w-e-toolbar,
  .w-e-text-container {
    z-index: 1 !important;
  }
</style>
